<template>
  <el-row class="list-page">
    <div class="search">
      <slot name="search"></slot>
    </div>
    <div class="btn" v-if="'btn' in $slots"><slot name="btn"></slot></div>
    <div class="table-list"><slot name="table" :tableH="tableH"></slot></div>
  </el-row>
</template>
<script setup>
import { ref, onMounted } from "vue";
const tableH = ref(null);
onMounted(() => {
  setTimeout(() => {
    const h = document.querySelector(".table-list").clientHeight;
    console.log(h);
    tableH.value = h;
  }, 2000);
});
</script>

<style lang="scss" scoped>
.list-page {
  width: 100%;
  height: 100%;
  position: absolute;
  flex-direction: row;
  .search {
    width: 100%;
  }
  .btn {
    width: 100%;
    padding-bottom: 15px;
  }
  .table-list {
    width: 100%;
    flex: 1;
  }
}
</style>
